<template>
    <el-dialog
    title="房贷计算器"
    :close-on-click-modal="false"
     v-dialogDrag
     width="70%"
    :visible.sync="visible">
    <el-tabs type="border-card" v-model="loanType">
        <el-tab-pane label="商业贷款" name="1" class="load-card">
            <!-- 商业贷款 -->
            <el-form :model="commercialLoans" :rules="rules" ref="ruleForm1" label-width="150px" class="demo-ruleForm">
                <el-form-item label="贷款类型" prop="loanType">
                    <el-radio-group v-model="commercialLoans.loanType" size="small">
                        <el-radio-button label="1">等额本金</el-radio-button>
                        <el-radio-button label="2">等额本息</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="贷款金额(万元)" prop="totalPrice">
                    <el-input v-model.number="commercialLoans.totalPrice" placeholder="请填写贷款金额(万元)"
                              maxlength="6"></el-input>
                </el-form-item>

                <el-form-item label="期限(年)" required>
                    <el-select v-model="commercialLoans.year" placeholder="请选择期限(年)" style="width: 100%;"
                               @change="year_picker">
                        <el-option :label="g" :value="g" v-for="g in commercialLoans.year_list" :key="g"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="利率(%)" prop="interestRate">
                    <el-select v-model="commercialLoans.interestRate" placeholder="请选择利率(%)" style="width: 100%;"
                               @change="rage_picker">
                        <el-option :label="g" :value="g" v-for="(g,gI) in commercialLoans.interestRate_list" :key="gI"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitCal('ruleForm1')" style="width: 100%">计算</el-button>
                </el-form-item>
            </el-form>
            <el-card class="box-card">
                <div class="loan-rs">
                    <div>
                        <p>每月月供参考(元)：</p>
                        <p class="payment">{{commercialLoans.monthlySupply}}</p>
                    </div>
                    <div class="flex-between">
                        <div><p class="payment">{{commercialLoans.grossInterest}}</p>
                            <p>支付利息(元)：</p></div>
                        <div><p class="payment">{{commercialLoans.totalRepayment}}</p>
                            <p>还款总额(元)：</p></div>
                    </div>
                </div>
            </el-card>
        </el-tab-pane>
        <!-- 公积金贷款 -->
        <el-tab-pane label="公积金贷款" name="2" class="load-card">
            <el-form :model="accumulationFund" :rules="rules" ref="ruleForm2" label-width="150px" class="demo-ruleForm">
                <el-form-item label="贷款类型" prop="loanType">
                    <el-radio-group v-model="accumulationFund.loanType" size="small">
                        <el-radio-button label="1">等额本金</el-radio-button>
                        <el-radio-button label="2">等额本息</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="贷款金额(万元)" prop="totalPrice">
                    <el-input v-model.number="accumulationFund.totalPrice" placeholder="请填写贷款金额(万元)"
                              maxlength="6"></el-input>
                </el-form-item>

                <el-form-item label="期限(年)" prop="year">
                    <el-select v-model="accumulationFund.year" placeholder="请选择期限(年)" style="width: 100%;"
                               @change="year_picker">
                        <el-option :label="g" :value="g" v-for="(g,gI) in accumulationFund.year_list" :key="gI"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="利率(%)" prop="interestRate">
                    <el-select v-model="accumulationFund.interestRate" placeholder="请选择利率(%)" style="width: 100%;"
                               @change="rage_picker">
                        <el-option :label="g" :value="g" v-for="(g,gI) in accumulationFund.interestRate_list" :key="gI"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitCal('ruleForm2')" style="width: 100%">计算</el-button>
                </el-form-item>
            </el-form>
            <el-card class="box-card">
                <div class="loan-rs">
                    <div>
                        <p>每月月供参考(元)：</p>
                        <p class="payment">{{accumulationFund.monthlySupply}}</p>
                    </div>
                    <div class="flex-between">
                        <div><p class="payment">{{accumulationFund.grossInterest}}</p>
                            <p>支付利息(元)：</p></div>
                        <div><p class="payment">{{accumulationFund.totalRepayment}}</p>
                            <p>还款总额(元)：</p></div>
                    </div>
                </div>
            </el-card>
        </el-tab-pane>
        <!-- 组合贷款 -->
        <el-tab-pane label="组合贷款" name="3" class="load-card">
            <el-form :model="combinationLoan" :rules="rulesThree" ref="ruleForm3" label-width="160px"
                     class="demo-ruleForm">
                <el-form-item label="贷款类型" prop="loanType">
                    <el-radio-group v-model="combinationLoan.loanType" size="small">
                        <el-radio-button label="1">等额本金</el-radio-button>
                        <el-radio-button label="2">等额本息</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="商贷贷款金额(万元)" prop="zhs_Price">
                    <el-input v-model.number="combinationLoan.zhs_Price" placeholder="请填写商贷贷款金额(万元)"
                              maxlength="6"></el-input>
                </el-form-item>
                <el-form-item label="商贷利率(%)" prop="zhs_interestRate">
                    <el-select v-model="combinationLoan.zhs_interestRate" placeholder="请选择利率(%)" style="width: 100%;"
                               @change="((val)=>{rage_picker(val, 'commercialLoans_interestRate')}) ">
                        <el-option :label="g" :value="g" v-for="(g,gI) in combinationLoan.zhs_interestRate_list"
                                   :key="gI"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="公积金贷款金额(万元)" prop="zhg_Price">
                    <el-input v-model.number="combinationLoan.zhg_Price" placeholder="请填写公积金贷款金额(万元)"
                              maxlength="6"></el-input>
                </el-form-item>
                <el-form-item label="公积金利率(%)" prop="zhg_interestRate">
                    <el-select v-model="combinationLoan.zhg_interestRate" placeholder="请选择公积金利率(%)" style="width: 100%;"
                               @change="((val)=>{rage_picker(val, 'accumulationFund_interestRate')})">
                        <el-option :label="g" :value="g" v-for="(g,gI) in combinationLoan.zhg_interestRate_list"
                                   :key="gI"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="期限(年)" required>
                    <el-select v-model="combinationLoan.year" placeholder="请选择期限(年)" style="width: 100%;"
                               @change="year_picker">
                        <el-option :label="g" :value="g" v-for="(g,gI) in combinationLoan.year_list" :key="gI"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitCal('ruleForm3')" style="width: 100%">计算</el-button>
                </el-form-item>
            </el-form>

            <el-card class="box-card">
                <div class="loan-rs">
                    <div>
                        <p>每月月供参考(元)：</p>
                        <p class="payment">{{combinationLoan.monthlySupply}}</p>
                    </div>
                    <div class="flex-between">
                        <div><p class="payment">{{combinationLoan.grossInterest}}</p>
                            <p>支付利息(元)：</p></div>
                        <div><p class="payment">{{combinationLoan.totalRepayment}}</p>
                            <p>还款总额(元)：</p></div>
                    </div>
                </div>
            </el-card>
        </el-tab-pane>
    </el-tabs>
    </el-dialog>
</template>

<script type="text/babel">
    import Vue from 'vue'
    import * as CFHL from '../../common/calculatorForHouseLoan' ;

    export default Vue.component('Loan', {
        data() {
            const totalPrice = (rule, value, callback) => { // 判断手机号是否正确
                if (value) {
                    value = parseInt(value);
                    let regTest = /^0/
                    if (regTest.test(value) || isNaN(value)) {
                        callback(new Error('请输入正整数'))
                    } else {
                        if (value * 1 > 200000) {
                            // value = 200000;
                            callback(new Error('请不要输入超过200000万元'))
                        } else {
                            callback();
                        }
                    }
                } else {
                    callback(new Error('请输入贷款金额'));
                }
            };

            return {
                visible:false,
                loanType: '1',
                commercialLoans: {
                    monthlySupply: 0,//月供
                    grossInterest: 0,//总利息
                    totalRepayment: 0,//还款总额
                    totalPrice: '',//贷款金额
                    loanType: '2',//商贷贷款类型 1等额本金 2等额本息
                    year: '30',//商贷期限
                    year_list: [],//商贷期限列表
                    interestRate: '4.9%',//商贷默认利率
                    interestRate_index: 0,
                    interestRate_list: ['4.9%', '3.43%', '3.675%', '3.92%', '4.17%', '4.41%', '4.66%', '5.15%', '5.39%', '5.88%', '6.37%'],//商贷利率列表
                },
                accumulationFund: {
                    monthlySupply: 0,//月供
                    grossInterest: 0,//总利息
                    totalRepayment: 0,//还款总额
                    totalPrice: '',//贷款金额
                    loanType: '2',//公积金贷款类型 1等额本金 2等额本息
                    year: '30',//公积金期限
                    year_list: [],//公积金期限列表
                    interestRate: '3.25%',//公积金默认利率
                    interestRate_index: 0,
                    interestRate_list: ['3.25%', '3.58%', '3.90%', '4.23%'],//公积金利率列表
                },
                combinationLoan: {
                    monthlySupply: 0,//月供
                    grossInterest: 0,//总利息
                    totalRepayment: 0,//还款总额
                    zhs_Price: '',
                    zhg_Price: '',
                    loanType: '2',//组合贷贷款类型 1等额本金 2等额本息
                    year: '30',//组合期限
                    year_list: [],//组合期限列表
                    zhs_interestRate: '4.9%',//商贷默认利率
                    zhs_interestRate_index: 0,
                    zhs_interestRate_list: ['4.9%', '3.43%', '3.675%', '3.92%', '4.17%', '4.41%', '4.66%', '5.15%', '5.39%', '5.88%', '6.37%'],//商贷利率列表
                    zhg_interestRate: '3.25%',//公积金默认利率
                    zhg_interestRate_index: 0,
                    zhg_interestRate_list: ['3.25%', '3.58%', '3.90%', '4.23%'],//公积金利率列表
                },
                rules: {
                    totalPrice: [
                        {required: true, message: '请输入贷款金额', trigger: 'blur'},
                        {validator: totalPrice, trigger: 'blur'},
                    ],
                    year: [
                        {required: true, message: '请选择期限', trigger: 'change'}
                    ],
                    interestRate: [
                        {required: true, message: '请选择利率', trigger: 'change'}
                    ],
                },
                rulesThree: {
                    zhs_Price: [
                        {required: true, message: '请输入贷款金额', trigger: 'blur'},
                        {validator: totalPrice, trigger: 'blur'},
                    ],
                    zhg_Price: [
                        {required: true, message: '请输入贷款金额', trigger: 'blur'},
                        {validator: totalPrice, trigger: 'blur'},
                    ],
                    year: [
                        {required: true, message: '请选择期限', trigger: 'change'}
                    ],
                    zhs_interestRate: [
                        {required: true, message: '请选择商贷利率', trigger: 'change'}
                    ],
                    zhg_interestRate: [
                        {required: true, message: '请选择公积金利率', trigger: 'change'}
                    ],
                }
            }
        },
        mounted() {
            this.initYearList();
        },
        methods: {
            init(){
               this.visible = true
            },
            initYearList() {
                let yearList = [];
                for (var i = 0; i < 30; i++) {
                    yearList.push(i + 1);
                }
                this.commercialLoans.year_list = yearList;
                this.accumulationFund.year_list = yearList;
                this.combinationLoan.year_list = yearList;
                console.log(this.combinationLoan.year_list);
            },
            submitCal(formName) {
                //等额本息    [贷款本金×月利率×（1+月利率）^还款月数]÷[（1+月利率）^还款月数－1]
                let that = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        that.calculateLoan();
                        that.$refs[formName].clearValidate();
                    } else {
                        return false;
                    }
                });
            },

            calculateLoan() {
                let commercialLoans = this.commercialLoans;
                let accumulationFund = this.accumulationFund;
                let combinationLoan = this.combinationLoan;
                if (this.loanType == '1') {
                    let detail = CFHL.calculate(commercialLoans.totalPrice * 10000, commercialLoans.interestRate.replace('%', '') / 100 / 12, commercialLoans.year * 12);
                    console.log(detail);
                    if (commercialLoans.loanType == '2') {//等额本息
                        this.commercialLoans.monthlySupply = detail.repayPerMouAi;
                        this.commercialLoans.grossInterest = detail.totalInterestAi;
                        this.commercialLoans.totalRepayment = detail.totalRepayAi;
                    } else {//等额本金
                        this.commercialLoans.monthlySupply = detail.repayPerMouthAp;
                        this.commercialLoans.grossInterest = detail.totalInterestAp;
                        this.commercialLoans.totalRepayment = detail.totalRepayPriceAp;
                    }
                } else if (this.loanType == '2') {
                    let detail = CFHL.calculate(accumulationFund.totalPrice * 10000, accumulationFund.interestRate.replace('%', '') / 100 / 12, accumulationFund.year * 12);
                    if (accumulationFund.loanType == '2') {//等额本息
                        this.accumulationFund.monthlySupply = detail.repayPerMouAi;
                        this.accumulationFund.grossInterest = detail.totalInterestAi;
                        this.accumulationFund.totalRepayment = detail.totalRepayAi;
                    } else {//等额本金
                        this.accumulationFund.monthlySupply = detail.repayPerMouthAp;
                        this.accumulationFund.grossInterest = detail.totalInterestAp;
                        this.accumulationFund.totalRepayment = detail.totalRepayPriceAp;
                    }
                } else if (this.loanType == '3') {

                    //商贷
                    var detail1 = CFHL.calculate(combinationLoan.zhs_Price * 10000, combinationLoan.zhs_interestRate.replace('%', '') / 100 / 12, combinationLoan.year * 12);
                    //公积金
                    var detail2 = CFHL.calculate(combinationLoan.zhg_Price * 10000, combinationLoan.zhg_interestRate.replace('%', '') / 100 / 12, combinationLoan.year * 12);
                    if (combinationLoan.loanType == '2') {//等额本息
                        this.combinationLoan.monthlySupply = detail1.repayPerMouAi * 1 + detail2.repayPerMouAi * 1;
                        this.combinationLoan.grossInterest = detail1.totalInterestAi * 1 + detail2.totalInterestAi * 1;
                        this.combinationLoan.totalRepayment = detail1.totalRepayAi * 1 + detail2.totalRepayAi * 1;
                    } else {//等额本金
                        this.combinationLoan.monthlySupply = detail1.repayPerMouthAp * 1 + detail2.repayPerMouthAp * 1;
                        this.combinationLoan.grossInterest = detail1.totalInterestAp * 1 + detail2.totalInterestAp * 1;
                        this.combinationLoan.totalRepayment = detail1.totalRepayPriceAp * 1 + detail2.totalRepayPriceAp * 1;
                    }
                }
                // console.log(CFHL.getRepayPerMouObj());
            },
            year_picker(e) {
                //选择年份的时候切换利率列表
                var arr1 = [], arr2 = [];
                if (this.loanType == '1') {//商贷期限
                    this.commercialLoans.year = e;
                    if (this.commercialLoans.year == 1) {
                        arr1 = ['4.35%', '3.045%', '3.262%', '3.48%', '3.698%', '3.915%', '4.132%', '4.568%', '4.785%', '5.22%', '5.655%']
                    } else if (this.commercialLoans.year > 1 && this.commercialLoans.year <= 5) {
                        arr1 = ['4.75%', '3.325%', '3.563%', '3.8%', '4.037%', '4.275%', '4.513%', '4.955%', '5.225%', '5.7%', '6.175%']
                    } else {
                        arr1 = ['4.9%', '3.43%', '3.675%', '3.92%', '4.17%', '4.41%', '4.66%', '5.15%', '5.39%', '5.88%', '6.37%']
                    }
                    this.commercialLoans.interestRate_list = arr1;
                    this.commercialLoans.interestRate = arr1[this.commercialLoans.interestRate_index];
                } else if (this.loanType == '2') {//公积金期限
                    this.accumulationFund.year = e;
                    if (this.accumulationFund.year <= 5) {
                        arr2 = ['2.75%', '3.025%', '3.3%', '3.575%']
                    } else {
                        arr2 = ['3.25%', '3.58%', '3.90%', '4.23%']
                    }
                    this.accumulationFund.interestRate_list = arr2;
                    this.accumulationFund.interestRate = arr2[this.accumulationFund.interestRate_index];
                } else if (this.loanType == '3') {//组合贷期限
                    this.combinationLoan.year = e;
                    if (this.combinationLoan.year == 1) {
                        arr1 = ['4.35%', '3.045%', '3.262%', '3.48%', '3.698%', '3.915%', '4.132%', '4.568%', '4.785%', '5.22%', '5.655%']
                        arr2 = ['2.75%', '3.025%', '3.3%', '3.575%']
                    } else if (this.combinationLoan.year > 1 && this.combinationLoan.year <= 5) {
                        arr1 = ['4.75%', '3.325%', '3.563%', '3.8%', '4.037%', '4.275%', '4.513%', '4.955%', '5.225%', '5.7%', '6.175%']
                        arr2 = ['2.75%', '3.025%', '3.3%', '3.575%']
                    } else {
                        arr1 = ['4.9%', '3.43%', '3.675%', '3.92%', '4.17%', '4.41%', '4.66%', '5.15%', '5.39%', '5.88%', '6.37%']
                        arr2 = ['3.25%', '3.58%', '3.90%', '4.23%']
                    }
                    this.combinationLoan.zhs_interestRate_list = arr1;
                    this.combinationLoan.zhs_interestRate = arr1[this.combinationLoan.zhs_interestRate_index];
                    this.combinationLoan.zhg_interestRate_list = arr2;
                    this.combinationLoan.zhg_interestRate = arr2[this.combinationLoan.zhg_interestRate_index];
                }
            },
            rage_picker(e, type) {
                if (this.loanType == '1') {//商贷利率
                    this.commercialLoans.interestRate = e;
                    this.commercialLoans.interestRate_index = this.commercialLoans.interestRate_list.findIndex((r) => {
                        return r == e
                    });
                } else if (this.loanType == '2') {//公积金利率
                    this.accumulationFund.interestRate = e;
                    this.accumulationFund.interestRate_index = this.commercialLoans.interestRate_index.findIndex((r) => {
                        return r == e
                    });
                } else if (this.loanType == '3') {
                    if (type == 'commercialLoans_interestRate') {//组合贷商贷利率
                        this.combinationLoan.zhs_interestRate = e;
                        this.combinationLoan.zhs_interestRate_index = this.commercialLoans.zhs_interestRate_index.findIndex((r) => {
                            return r == e
                        });
                    } else if (type == 'accumulationFund_interestRate') {//组合贷公积金利率
                        this.combinationLoan.zhg_interestRate = e;
                        this.combinationLoan.zhg_interestRate_index = this.commercialLoans.zhg_interestRate_index.findIndex((r) => {
                            return r == e
                        });
                    }

                }

            },
            resetForm() {
                this.$refs['ruleForm1'].resetFields();
                this.$refs['ruleForm2'].resetFields();
                this.$refs['ruleForm3'].resetFields();
                this.commercialLoans.monthlySupply = 0;
                this.commercialLoans.grossInterest = 0;
                this.commercialLoans.totalRepayment = 0;
                this.accumulationFund.monthlySupply = 0;
                this.accumulationFund.grossInterest = 0;
                this.accumulationFund.totalRepayment = 0;
                this.combinationLoan.monthlySupply = 0;
                this.combinationLoan.grossInterest = 0;
                this.combinationLoan.totalRepayment = 0;
            }
        }
    })
</script>

<style scoped lang="scss">
    /*@import '~@/assets/main.scss';*/

    .load-card {
        display: flex;
        justify-content: space-around;
    }

    .flex-between {
        display: flex;
        justify-content: space-between;
    }

    .loan-rs {
        padding: 20px;
        min-width: 280px;
        font-size: 18px;

        .payment {
            font-size: 24px;
            font-weight: bold;
        }
    }
</style>
